<template>
  <div class="player-container">
    <div class="player-header">
      <el-button text @click="$router.back()">
        <el-icon><ArrowLeft /></el-icon>
        返回
      </el-button>
      <h2>{{ currentVideo?.title || '视频播放' }}</h2>
    </div>
    
    <div class="player-main">
      <div class="video-wrapper">
        <video
          ref="videoPlayer"
          class="video-js vjs-default-skin"
          controls
          preload="auto"
          data-setup="{}"
        >
          <source :src="videoUrl" type="video/mp4" />
        </video>
      </div>
      
      <div class="player-controls">
        <div class="video-info">
          <h3>{{ currentVideo?.title }}</h3>
          <p>{{ currentVideo?.description }}</p>
        </div>
        
        <div class="control-buttons">
          <el-button-group>
            <el-button @click="togglePlay">
              <el-icon><VideoPlay v-if="!isPlaying" /><VideoPause v-else /></el-icon>
            </el-button>
            <el-button @click="toggleMute">
              <el-icon><Mute v-if="isMuted" /><Volume /></el-icon>
            </el-button>
            <el-button @click="toggleFullscreen">
              <el-icon><FullScreen /></el-icon>
            </el-button>
          </el-button-group>
          
          <el-select v-model="playbackRate" @change="changePlaybackRate" style="width: 80px">
            <el-option label="0.5x" value="0.5" />
            <el-option label="1x" value="1" />
            <el-option label="1.25x" value="1.25" />
            <el-option label="1.5x" value="1.5" />
            <el-option label="2x" value="2" />
          </el-select>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import { ArrowLeft, VideoPlay, VideoPause, Mute, Volume, FullScreen } from '@element-plus/icons-vue'

const route = useRoute()
const videoPlayer = ref<HTMLVideoElement>()
const player = ref<any>()
const videoUrl = ref(route.query.url as string || '/sample.mp4')
const isPlaying = ref(false)
const isMuted = ref(false)
const playbackRate = ref('1')

const currentVideo = ref({
  title: '示例视频',
  description: '这是一个示例视频描述'
})

onMounted(() => {
  if (videoPlayer.value) {
    player.value = videojs(videoPlayer.value, {
      controls: true,
      autoplay: false,
      preload: 'auto',
      fluid: true,
      responsive: true
    })

    player.value.on('play', () => {
      isPlaying.value = true
    })

    player.value.on('pause', () => {
      isPlaying.value = false
    })
  }
})

onUnmounted(() => {
  if (player.value) {
    player.value.dispose()
  }
})

const togglePlay = () => {
  if (player.value) {
    if (isPlaying.value) {
      player.value.pause()
    } else {
      player.value.play()
    }
  }
}

const toggleMute = () => {
  if (player.value) {
    isMuted.value = !isMuted.value
    player.value.muted(isMuted.value)
  }
}

const toggleFullscreen = () => {
  if (player.value) {
    player.value.requestFullscreen()
  }
}

const changePlaybackRate = (rate: string) => {
  if (player.value) {
    player.value.playbackRate(parseFloat(rate))
  }
}
</script>

<style lang="scss" scoped>
.player-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #000;
}

.player-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #1a1a1a;
  border-bottom: 1px solid #333;

  h2 {
    font-size: 18px;
    font-weight: 500;
  }
}

.player-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.video-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;

  video {
    max-width: 100%;
    max-height: 100%;
  }
}

.player-controls {
  padding: 16px;
  background: #1a1a1a;
  border-top: 1px solid #333;

  .video-info {
    margin-bottom: 16px;

    h3 {
      font-size: 16px;
      margin-bottom: 8px;
    }

    p {
      font-size: 14px;
      color: #b3b3b3;
    }
  }

  .control-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
